<template>
  <span ref="scrollIntoView"></span>
  <div class="item-box" v-if="store.childModel">
    <div class="banner-box" v-if="store.childModel.value">
      <img
        v-if="store.childModel.value"
        class="banner-img"
        :src="$filters.getLinkUrl(store.childModel.value + '?imageView2/0/w/2560/format/webp')"
        alt=""
      />
      <!-- <UnitImageNull v-else></UnitImageNull> -->
    </div>
    <div class="banner-box-no"></div>
    <div style="min-height: calc(100vh - 580px)">
      <div class="banner-content">
        <!-- <div>
          <titles :title="store.childModel.text" />
          <div class="subTitle" v-if="store.childModel?.subTitle">——{{ store.childModel.subTitle }}</div>
        </div> -->
        <titles :title="store.childModel.text" />
        <div class="subTitle" v-if="store.childModel?.subTitle">——{{ store.childModel.subTitle }}</div>
        <div
          style="
            width: 1180px;
            margin: auto;
            padding-top: 20px;
            text-indent: 2em;
            line-height: 32px;
            text-align: justify;
          "
        >
          <span
            class="banner-content-title"
            :style="{
              fontSize: store.styleInfo.contentSize,

              color: store.styleInfo.fontColor,
            }"
            >{{ store.childModel.remarks }}</span
          >
        </div>
      </div>
      <div class="child-content" v-if="store.childModel.children.length > 0">
        <!-- 第二级 -->
        <!-- <a
      href="http://localhost:8880/#/templateBase/templateItem1/templateExhibitsInfo?id=400250623065856&moduleId=399210485596229&projectId=398948042121285"
      >aaaaaaaaaa</a
    > -->
        <pageChildItem1 />
      </div>
    </div>
  </div>
  <!-- <NavVue :flag="true"></NavVue> -->
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'itemChild2',
});
</script>
<script setup lang="ts">
// @ts-nocheck
import titles from '@/components/title/title.vue';
import pageChildItem1 from './components/pageChildItem1.vue';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';

import pageChildItem2 from './components/pageChildItem2.vue';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { onMounted, watch } from 'vue';
const store = useProjectStore();
const { childModel, tabvalue, styleInfo } = storeToRefs(store);
const route = useRoute();
const current = Number(route.query.current);
watch(
  () => styleInfo,
  (value) => {
    // const foundElement = styleInfo.value.moduleList.find((item) => item.id === store.childModel.id);
    // store.setchildModel(foundElement);
    if (route.query.childId) {
      const foundElement = styleInfo.value.moduleList.find((item) => item.id === Number(route.query.childId));
      //console.log(foundElement, 'foundElement--------');

      store.setchildModel(foundElement);
    } else {
      // const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
      // store.setchildModel(foundElement);
    }
  },
  { immediate: true, deep: true },
);
watch(
  () => route.query.childId,
  (value) => {
    const foundElement = styleInfo.value.moduleList.find((item) => item.id === Number(route.query.childId));
    store.setchildModel(foundElement);
    //console.log(foundElement, 'foundElement--------');
  },
  { immediate: true, deep: true },
);
watch(
  () => childModel,
  (value) => {
    // store.childModel = store.childModel;
  },
  { deep: true },
);
onMounted(() => {
  // var tem1ID = document.getElementById('tem1-heard-item');
  // if (store.childModel.value) {
  //   tem1ID.style.background = 'rgba(0, 0, 0, 0.4)';
  // }
  // //console.log('tem1ID', tem1ID);
});
</script>
<style scoped lang="less">
.item-box {
  width: 100%;
  height: 100%;
  // min-height: 100vh;
}
.banner-box {
  width: 100%;
  min-width: 1440px;
  height: 500px;
  margin-bottom: 80px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.banner-box-no {
  padding-bottom: 180px;
}
.banner-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.banner-content-titl {
  text-indent: 2em;
}
.subTitle {
  color: #333;
  font-family: 'SourceHanSerifCN-medium';
  font-size: 18px;
  font-style: normal;
  text-align: center;
  line-height: 30px; /* 166.667% */
  margin-top: 8px;
}
</style>
